import React from 'react'
import Swiper from 'react-id-swiper'
import { connect } from 'dva'

import Title from '../../components/Title'
import BuyBar from '../../components/BuyBar'

import 'swiper/css/swiper.min.css';
import './style.css'


const params = {
    pagination: {
        el: '.swiper-pagination',
        type: 'fraction',
    },
}

class Index extends React.Component {

    getCommodityItem = () => {
        const { match, commodity } = this.props
        const { id } = match.params
        let obj = {
            banners: []
        }
        if (commodity.map && commodity.map[id]) {
            return commodity.map[id]
        }
        return obj
    }

    renderBanner = () => {
        let commodityItem = this.getCommodityItem()
        let banners = commodityItem.banners
        return (
            <Swiper {...params}>
                {
                    banners.map(item => (
                        <div key={item} >
                            <img src={item} />
                        </div>
                    ))
                }
            </Swiper>
        )
    }

    renderDetail = () => {
        let commodityItem = this.getCommodityItem()
        return (
            <div className='commodityInfo-details'>
                <div className='commodityInfo-details_money'>
                    ¥: {commodityItem.price}
                </div>
                <div className='commodityInfo-details_title' >
                    {commodityItem.title}
                </div>
                <div className='commodityInfo-details_deliver'>
                    <div>
                        发货
                    </div>
                    <div 
                        className='details'
                    >
                        <div>快递方式</div>
                        <div>付款后48小时发货</div>
                    </div>
                </div>
                <div className='commodityInfo-other'>
                    {commodityItem.detail_html}
                </div>
            </div>
        )
    }

    render() {
        let commodity = this.getCommodityItem()
        return (
            <div className='commodityInfo'>
                <Title title='商品详情' />
                {this.renderBanner()}
                {this.renderDetail()}
                <BuyBar commodity={commodity} />
            </div>
        )
    }
}

const mapState = state => ({
    commodity: state.commodity
})

export default connect(mapState)(Index)
